import React from "react";
import {Redirect, Route} from "react-router-dom";
import {Home} from './biz/home/Home'
import {AppList} from "./biz/home/service/AppList";
import {Token} from "./framework/Token";
import {AppDetail} from "./biz/home/service/AppDetail";
import {App} from "./biz/home/service/App";
import {Build} from "./biz/home/service/build/Build";
import {Deploy} from "./biz/home/service/deploy/Deploy";
import {Cluster} from "./biz/home/cluster/Cluster";
import {ClusterList} from "./biz/home/cluster/ClusterList";
import {ClusterDetail} from "./biz/home/cluster/ClusterDetail";
import {WorkSpace} from "./biz/home/workspace/WorkSpace";
import {WorkSpaceRoot} from "./biz/home/workspace/WorkSpaceRoot";
import {WorkSpaceBuild} from "./biz/home/workspace/build/WorkSpaceBuild";
import {Login} from "./biz/common/Login";
import {ProjectCreate} from "./biz/home/projects/ProjectCreate";
import {Components} from "./biz/home/compenents/Components";
import {Configs} from "./biz/home/config/Configs";
import {Index} from "./biz/Index";
import {ProjectBase} from "./biz/home/projects/ProjectBase";

// Some folks find value in a centralized route config.
// A route config is just data. React is great at mapping
// data into components, and <Route> is a component.

////////////////////////////////////////////////////////////
interface AppRoute {
    path: string;
    component: any;
    routes?: Array<AppRoute>;
    auth?: boolean;
    exact?: boolean;
    redirectTo?: string;
}

// then our route config
export const routes: Array<AppRoute> = [
    {
        path: "",
        component: Index,
        auth: true,
        routes: [
            // {
            //     path: '/workspace',
            //     component: WorkSpace, auth: true,
            //
            //     routes: [
            //         {
            //             path: '/workspace/', exact: true, auth: true,
            //             component: WorkSpaceRoot
            //         },
            //         {
            //             path: '/workspace/:appId/build', auth: true,
            //             component: WorkSpaceBuild
            //         }
            //     ]
            // },
            {
                path: "/:projectId",
                component: Home, auth: true,

                routes: [
                    {path: "/:projectId/home/", component: ProjectBase},
                    {path: "/:projectId/config/", component: Configs},
                    {path: "/:projectId/components", component: Components},
                ]
            },
            {path: "/projects/create", component: ProjectCreate},
            // {
            //     path: '/workspace',
            //     component: WorkSpace, auth: true,
            //
            //     routes: [
            //         {
            //             path: '/workspace/', exact: true, auth: true,
            //             component: WorkSpaceRoot
            //         },
            //         {
            //             path: '/workspace/:appId/build', auth: true,
            //             component: WorkSpaceBuild
            //         }
            //     ]
            // },
            // {
            //     path: "/cluster",
            //     component: Cluster, auth: true,
            //
            //     routes: [
            //         {
            //             path: '/cluster/', exact: true, auth: true,
            //             component: ClusterList
            //         },
            //         {
            //             path: '/cluster/:clusterId', auth: true,
            //             component: ClusterDetail
            //         }
            //     ]
            // },
            // {
            //     path: "/app",
            //     component: App, auth: true,
            //
            //     routes: [
            //         {
            //             path: '/app/', exact: true, auth: true,
            //             component: AppList
            //         },
            //         {
            //             path: '/app/:appId',
            //             component: AppDetail, auth: true,
            //
            //             routes: [
            //                 {
            //                     path: '/app/:appId/build', auth: true,
            //                     component: Build
            //                 },
            //                 {
            //                     path: '/app/:appId/deploy', auth: true,
            //                     component: Deploy
            //                 },
            //             ]
            //         }
            //     ]
            // }
        ]
    }
];


export interface BaseProps {
    route?: any;
    routes?: Array<any>;
    stateFunctions?: any;
    history?: any;
    match?: any;
    location?: any;
}

export class RouteAndSubRoutes extends React.Component<BaseProps> {
    render() {
        const route: AppRoute = this.props.route;
        if (route.auth && !Token.isLogged()) {
            return <div>
                <Login {...this.props}/>
            </div>
        }
        return <div>
            <Route exact={route.exact === true}
                   path={route.path}
                   render={props => (<div>
                       <route.component {...props} routes={route.routes}
                                        stateFunctions={this.props.stateFunctions}/>
                       {route.routes?.map((routeItem: any, i: any) => <RouteAndSubRoutes key={i} route={routeItem}/>)}
                   </div>)}/>
            {route.redirectTo ? <Redirect push to={route.redirectTo}/> : (<div/>)}
        </div>
    }
}

export class RouteApp extends React.Component<BaseProps> {
    constructor(props: BaseProps) {
        super(props);
        this.state = {isLogged: Token.isLogged()};
        this.changeLoginStatus = this.changeLoginStatus.bind(this);
    }

    changeLoginStatus() {
        this.setState({
            isLogged: true
        })
    }

    render() {
        return <div>
            {routes.map((route, i) => <RouteAndSubRoutes {...this.props} key={i} route={route}/>)}
        </div>
    }
}

export default RouteApp;
